Event Delegation এবং Bubbling

Event delegation এবং bubbling হচ্ছে দুইটি গুরুত্বপূর্ণ ধারণা যা ওয়েব ডেভেলপমেন্টে ইভেন্ট হ্যান্ডলিংয়ের সময় ব্যবহৃত হয়। ExtJS তে এই ধারণাগুলোর ব্যবহার কার্যকরী এবং অ্যাপ্লিকেশন ডেভেলপমেন্টের ক্ষেত্রে পারফরম্যান্স এবং স্কেলেবিলিটি উন্নত করতে সহায়তা করে।

১. Event Delegation

Event Delegation হল একটি কৌশল, যেখানে একটি প্যারেন্ট কম্পোনেন্ট বা এলিমেন্টের ইভেন্ট হ্যান্ডলার একটি চাইল্ড এলিমেন্টের উপর কাজ করে। এটি মূলত ইভেন্ট হ্যান্ডলারকে প্যারেন্ট এলিমেন্টে অ্যাটাচ করে, এবং যখন চাইল্ড এলিমেন্টে কোনো ইভেন্ট ট্রিগার হয়, তখন প্যারেন্ট এলিমেন্ট সেই ইভেন্টটি ক্যাচ করে এবং সঠিক ইভেন্ট হ্যান্ডলার চালায়।

এই কৌশলের মূল সুবিধা হচ্ছে, আপনি একাধিক চাইল্ড এলিমেন্টের জন্য একাধিক ইভেন্ট হ্যান্ডলার না লিখে, একটি সিঙ্গেল ইভেন্ট হ্যান্ডলার দিয়ে সব চাইল্ড এলিমেন্টের ইভেন্ট হ্যান্ডল করতে পারেন। এটি কোডকে আরও কার্যকরী এবং স্কেলেবল করে তোলে।

ExtJS তে Event Delegation এর ব্যবহার:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Event Delegation Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Button 1',
        itemId: 'button1'
    }, {
        xtype: 'button',
        text: 'Button 2',
        itemId: 'button2'
    }],
    
    listeners: {
        render: function() {
            this.el.on('click', function(e, target) {
                // Event delegation: identify which button was clicked
                if (target.id === 'button1') {
                    console.log('Button 1 clicked!');
                } else if (target.id === 'button2') {
                    console.log('Button 2 clicked!');
                }
            });
        }
    }
});

ব্যাখ্যা:

• এখানে, this.el.on ব্যবহার করে প্যানেলের রেন্ডার হওয়ার পর প্যানেলের সমস্ত এলিমেন্টে click ইভেন্ট ডেলিগেট করা হয়েছে।
• একাধিক বাটনের জন্য আলাদা ইভেন্ট হ্যান্ডলার না দিয়ে, প্যারেন্ট এলিমেন্ট থেকে সিঙ্গেল হ্যান্ডলার ব্যবহার করা হয়েছে।
• ইভেন্টের target.id যাচাই করে কোন বাটন ক্লিক হয়েছে তা শনাক্ত করা হয়েছে।

২. Event Bubbling

Event Bubbling হল একটি কৌশল, যেখানে একটি ইভেন্ট একটি চাইল্ড এলিমেন্ট থেকে শুরু হয় এবং ধীরে ধীরে তার প্যারেন্ট এলিমেন্টগুলোর দিকে "বাবল" করে উঠে। অর্থাৎ, যখন কোনো ইভেন্ট কোনো চাইল্ড এলিমেন্টে ঘটে, তখন তা প্যারেন্ট এলিমেন্টগুলির মাধ্যমে উপরে উঠে আসে, যতক্ষণ না তা ডকুমেন্টের রুট (document root) পর্যন্ত পৌঁছায়।

ExtJS তে Event Bubbling এর ব্যবহার:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Event Bubbling Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Click Me!',
        itemId: 'clickButton'
    }],
    
    listeners: {
        render: function() {
            // Bubbling: Catch the click event from child elements (like button)
            this.el.on('click', function(e, target) {
                console.log('Event bubbling triggered!');
            });
        }
    }
});

ব্যাখ্যা:

• এখানে, this.el.on('click', ...) ব্যবহার করা হয়েছে। এটি একটি উদাহরণ যেখানে প্যানেলটি ইভেন্ট বব্বলিংয়ের মাধ্যমে সমস্ত চাইল্ড এলিমেন্টের ক্লিক ইভেন্ট গ্রহণ করছে।
• যেহেতু বাটনটি প্যানেলের একটি চাইল্ড, বাটন ক্লিক হলে এটি ইভেন্টটি বাবল করে প্যানেলে পৌঁছে এবং প্যানেলের ইভেন্ট হ্যান্ডলার সেট হয়।

Event Delegation এবং Bubbling এর মধ্যে পার্থক্য

1. Event Delegation:
   • প্যারেন্ট এলিমেন্টে ইভেন্ট হ্যান্ডলার অ্যাটাচ করা হয়।
   • চাইল্ড এলিমেন্টের ইভেন্টগুলি প্যারেন্ট এলিমেন্টে "ডেলিগেট" হয়ে পৌঁছায়।
   • কোড আরও সিম্পল এবং কার্যকরী হয়, বিশেষ করে অনেক চাইল্ড এলিমেন্টের জন্য।
2. Event Bubbling:
   • ইভেন্টটি চাইল্ড এলিমেন্ট থেকে শুরু হয়ে উপরে প্যারেন্ট এলিমেন্টের দিকে "বাবল" হয়।
   • একাধিক লেভেল পর্যন্ত ইভেন্টটি পৌঁছাতে পারে।
   • ইভেন্টটি প্যারেন্টে গিয়ে ট্রিগার হতে পারে।

ExtJS তে Bubbling বন্ধ করা

ExtJS তে ইভেন্ট বব্বলিং বন্ধ করার জন্য আপনি stopEvent() মেথড ব্যবহার করতে পারেন।

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Stop Event Bubbling Example',
    renderTo: Ext.getBody(),
    
    items: [{
        xtype: 'button',
        text: 'Click Me!',
        itemId: 'clickButton'
    }],
    
    listeners: {
        render: function() {
            this.el.on('click', function(e, target) {
                // Stop the bubbling of the event
                e.stopEvent();
                console.log('Bubbling stopped!');
            });
        }
    }
});

ব্যাখ্যা:

• e.stopEvent() ব্যবহার করে ইভেন্ট বব্বলিং বন্ধ করা হচ্ছে, যাতে ইভেন্ট প্যারেন্ট এলিমেন্টে পৌঁছাতে না পারে।

সারাংশ

• Event Delegation: প্যারেন্ট এলিমেন্টে একাধিক চাইল্ড এলিমেন্টের জন্য একটি সাধারণ ইভেন্ট হ্যান্ডলার ব্যবহার করে, এটি কোডকে আরো স্কেলেবল এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
• Event Bubbling: ইভেন্টটি চাইল্ড এলিমেন্ট থেকে প্যারেন্ট এলিমেন্টে যেতে থাকে এবং আপনি এই বব্বলিংয়ের মাধ্যমে ইভেন্ট হ্যান্ডল করতে পারেন।
• Stop Event Bubbling: e.stopEvent() দিয়ে ইভেন্ট বব্বলিং বন্ধ করা যায়, যা প্যারেন্ট এলিমেন্টে পৌঁছানোর আগেই ইভেন্টের প্রসেসিং থামিয়ে দেয়।

এই ধারণাগুলি ব্যবহার করে, আপনি ExtJS অ্যাপ্লিকেশনকে আরও পারফরম্যান্ট এবং সহজে পরিচালনা করতে পারবেন।